<template>
  <div>
    <!-- 头部 -->
    <cms-header></cms-header>

    <el-aside :width="$store.state.sys.asideWidth" style="" class="cms-left-aside">
      <!-- 左侧部 -->
      <cms-submenu></cms-submenu>
    </el-aside>
    <div class="cms-right-main" :class="$store.state.sys.asideWidth=='50px'?'right-margin-50':'right-margin-220'">
      <!-- 内容 -->
      <ul class="breadcrumb">
        <li>
          <span class="iconfont icon-home"></span>
        </li>
        <li v-for="(item,index) in $route.matched" :key="item.path" v-if="item.name!=undefined" >
          <router-link :to="item.path" v-if="index!=$route.matched.length-1&&!item.meta.isLink">{{item.name}}
          </router-link>
          <a href="javascript:void(0)" v-else>{{item.name}}</a>
        </li>
      </ul>
      <app-main class="firstContainer" style="position: relative;"></app-main>
    </div>
    <div id="slider" class="right-sider" :class="[$store.state.sys.pwdCollapse?'active':'']">
      <el-form :model="userInfo" :rules="rules" ref="userInfo">
        <el-form-item label="" class="form-group label-no-margin" prop="origPwd">
          <el-col>
            <el-input placeholder="原密码" v-model="userInfo.origPwd" type="password"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="" class="form-group label-no-margin" prop="newPwd">
          <el-col>
            <el-input placeholder="新密码" v-model="userInfo.newPwd" type="password"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="" class="form-group label-no-margin" prop="newPwd2" style="border:none">
          <el-col>
            <el-input placeholder="重复新密码" v-model="userInfo.newPwd2" type="password"></el-input>
          </el-col>
        </el-form-item>
        <div class="clearfix">
          <el-button type="primary" @click="changePwd" style="float:left;width:47%">修改密码</el-button>
          <el-button type="info" @click="rest" style="float:right;width:47%;background:#999;border-color:#999">取消
          </el-button>
        </div>
      </el-form>
    </div>
  </div>

</template>

<script>

  import cmsHeader from "@/components/header.vue";
  import cmsSubmenu from "@/components/subMenu.vue";
  import cmsTop from "@/components/top.vue";
  import axios from "axios"

  export default {
    components: {cmsHeader, cmsSubmenu, cmsTop},
    data() {
      var valOld = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入旧密码"));
        } else {
          axios.post('/api/member/personal/check_pwd', {origPwd: value}).then(res => {
            if (res.body.pass == true) {
              callback();
            } else {
              callback(new Error("原密码输入不正确"));
            }
          })
        }
      };

      var validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.userInfo.newPwd) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        userInfo: {
          origPwd: "",
          newPwd: "",
          newPwd2: ""
        },
        rules: {
          origPwd: [{
            validator: valOld,
            trigger: "blur"
          }
          ],
          newPwd: [
            {
              validator: validatePass,
              trigger: "blur"
            }
          ],
          newPwd2: [
            {
              validator: validatePass2,
              trigger: "blur"
            }
          ]
        }
      }
    },
    methods: {
      queryChange() {
        let clientWidth = document.body.clientWidth;
        let clientHeight = document.body.clientHeight;


        $('.firstContainer').css('minHeight', (clientHeight - 110) + 'px');
        $('.secondContainer').css('minHeight', (clientHeight - 110) + 'px');
        if (clientWidth < 1200) {
          this.$store.dispatch('setCollapse', false);
        } else {
          this.$store.dispatch('setCollapse', false);
        }
      },
      changePwd() {
        this.$refs["userInfo"].validate(valid => {
          if (valid) {

            axios.post('/api/member/personal/update', this.userInfo)
              .then(res => {
                if (res.code == "200") {
                  this.$message.success("修改成功");
                  localStorage.removeItem("sessionKey");
                  localStorage.removeItem("userName");
                  this.$router.push("/login");
                } else {
                  this.$message.error("修改失败");
                }
              })
              .catch(res => {
                this.$message.error("修改失败");
              });
          } else {
            return false;
          }
        });
      },
      rest() {
        this.$refs["userInfo"].resetFields();
        this.$store.dispatch('setPwd', false);
        $("#slider").attr("class", "right-sider");
      }
    },
    beforeRouteLeave(to, from, next) {
      this.$store.dispatch('setPwd', false);
      next();
    },
    mounted() {
      const self = this;
      $("#main").slimScroll({
        height: "100%",
        width: "auto",
        wrapperClass: "asidebar",
        color: "gray",
        opacity: 1
      });

      self.queryChange();
      window.onresize = () => {
        return (() => {
          self.queryChange();
        })();
      };
    }
  };
</script>
<style lang="scss" scoped>
  .el-header {
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    -webkit-transform: translateZ(0);
  }

  .cms-left-aside {
    width: 220px;
    z-index: 10;
    background-color: #EFA22E;
    bottom: 0;
    margin-top: 0;
    padding-bottom: 30px;
    position: fixed;
    top: 60px;
  }

  .icon-home {
    color: #2691e3;
  }

  .breadcrumb {
    height: 50px;
    line-height: 50px;
    overflow: hidden;

    li {
      float: left;
      font-size: 14px;

      a {
        color: #999;
      }
    }
  }

  .right-sider.active {
    right: 0px;
  }

  .right-sider {
    width: 240px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 2px;
    position: fixed;
    right: -240px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    transition: opacity 0.3s, transform 0.3s, right 0.3s, top 0.4s;
    overflow: hidden;
    z-index: 999;
    top: 60px;
    height: 100%;
  }


</style>
